/*
 * @Author: kanglang
 * @Date: 2020-12-09 14:25:51
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-15 10:07:20
 * @Description: 用户反馈--语音部分
 */
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { px2dp, screenWidth } from '@/styles';
import { iconClearGray, iconVoiceBlack } from '@/images';

const unitLen = (screenWidth - 2 * px2dp(32) - px2dp(24) - px2dp(20) - px2dp(32) - px2dp(160)) / 60; // 每秒的width宽度

const PlayVoiceItem = ({ voiceLen, delVoice, playVoice, isPlay, source, index }) => {
  const delCurVoiceFun = () => {
    delVoice && delVoice();
  };

  const playVoiceFun = () => {
    playVoice && playVoice();
  };
  return (
    <View style={[styles.voiceContent, source.length - 1 == index && { paddingBottom: px2dp(32) }]}>
      <TouchableOpacity style={styles.delImg} onPress={delCurVoiceFun}>
        <Image
          style={styles.delImg}
          source={iconClearGray}
        />
      </TouchableOpacity>
      <TouchableOpacity
        style={[
          styles.voiceBg,
          (voiceLen > 0 && voiceLen == 1) ?
            { width: px2dp(160) } :
            { width: px2dp(160) + unitLen * voiceLen }
        ]}
        onPress={playVoiceFun}
      >
        {
          isPlay &&
          <Image
            style={styles.playVoice}
            source={require('@/images/gif/voice_play.gif')}
          />
        }

        {
          isPlay == false && <Image
            style={styles.playVoice}
            source={iconVoiceBlack}
          />
        }

        <Text style={styles.voiceSecond}>
          {voiceLen}
          {' '}
          ''
        </Text>
      </TouchableOpacity>
    </View>

  );
};
export default PlayVoiceItem;
const styles = StyleSheet.create({
  voiceContent: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: px2dp(32),
    paddingTop: px2dp(32)
  },
  delImg: {
    width: px2dp(32),
    height: px2dp(32),
    marginRight: px2dp(32)
  },
  voiceBg: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#F0EFEF',
    padding: px2dp(24),
    borderRadius: 6,
  },
  playVoice: {
    width: px2dp(32),
    height: px2dp(32),
  },
  voiceSecond: {
    fontSize: px2dp(28),
    paddingLeft: px2dp(20)
  }
});
